<template>
  <div class="my-heroe">
    <app-bar back title="我的武将">
      <p slot="right" class="zhaomu" @click="$router.push('/enlist')">+点亮</p>
    </app-bar>
    <div class="content" v-if="!alldataLoading">
      <div
        class="item"
        v-for="(item, i) in S_heroesList"
        :key="i"
        :class="{
          own: userHeroes.indexOf(item.id) !== -1,
        }"
        @click="heroeDetails(item.id)"
      >
        <div class="img">
          <img :type="item.quality" :src="item.avatar" />
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>

    <div class="loading" v-else>
      <van-loading color="#1989fa" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "MyHeroe",
  computed: {
    ...mapState("data", ["heroesList", "userHeroes", "alldataLoading"]),
    S_heroesList() {
      let list = this.heroesList.filter((item) => item.quality == 4);
      list.sort((a, b) => {
        let x = this.userHeroes.indexOf(a.id) === -1 ? 0 : 1;
        let y = this.userHeroes.indexOf(b.id) === -1 ? 0 : 1;
        return y - x;
      });
      return list;
    },
  },
  methods: {
    heroeDetails(id) {
      this.$router.push("/heroe/" + id);
    },
  },
  created() {
    window.injectedAll.sendUv("三国志.战略版搭配");
    window.shareData = null;
    window.injectedAll.shareInit();
  },
};
</script>

<style lang="scss" scoped>
.my-heroe {
  width: 100%;
  min-height: 100%;
  padding-top: 0.46rem;
  .zhaomu {
    position: absolute;
    top: 50%;
    right: 0.18rem;
    transform: translateY(-50%);
    height: 0.18rem;
    margin: 0;
    font-size: 14px;
    color: #ff8a69;
  }
  .content {
    padding: 0 0.1rem;
    .item {
      display: inline-block;
      width: calc(20% - 0.1rem);
      margin: 0 0.05rem 0.1rem;
      opacity: 0.5;
      &.own {
        opacity: 1;
      }
      .img {
        width: 100%;
        height: 0;
        padding-top: 100%;
        position: relative;
        img {
          position: absolute;
          top: 0;
          left: 0;
          width: calc(100% - 4px);
          height: calc(100% - 4px);
          border-radius: 0.04rem;
          &[type="4"] {
            border: 2px solid #f2ae32;
          }
          &[type="3"] {
            border: 2px solid #9363de;
          }
          &[type="2"] {
            border: 2px solid #7baefd;
          }
          &[type="1"] {
            border: 2px solid #99cfaa;
          }
        }
      }
      .name {
        margin-top: 0.06rem;
        text-align: center;
        font-size: 0.14rem;
        color: #333333;
        line-height: 0.2rem;
        white-space: nowrap;
      }
    }
  }
}
</style>
